<template>
	<!-- <custom-nav-my  :showBackArrow="true" :backFunc="onToIndex" title="个人中心"></custom-nav-my> -->
	<custom-nav :showBackArrow="true" :title="'个人中心'">
		<template #navRight>
			<image class="icon-setting" src="/static/setting@3x.png" @tap="handleToSet" :style="settingStyle"></image>
		</template>
	</custom-nav>
	<view class="page-my" :style="pagePaddingTop">
		<template v-if="pageLoading">
			<view class="wrap-basic">
				<view class="container-basic">
					<image class="bg-logo" src="/static/personal_center_logo.png"></image>
					<view class="cont-basic">
						<view class="container-avatar">
							<image @tap="toUser" :class="['wrap-avatar',showAvatar==-1?'':'user-avatar']"
								:src="showAvatar==-1?'/static/default_avatar.png':showAvatar" />
							<image @tap="toUser" class="icon-edit" src="/static/icon_edit_userinfo.png"></image>
						</view>

						<view class="wrap-basic-info">
							<view class="cont-nickname" @tap="toUser">{{showNickName}}</view>
							<view class="cont-phone" @tap="toUser">{{showPhoneUser?showPhoneUser:'您未设置手机号'}}</view>
						</view>
					</view>
					<view class="cont-basic-bottom">
						<view class="cont-amount">
							<text>余额：</text>
							<view class="amount">{{showAmount}}</view>
						</view>
						<view class="btn-recharge" @tap="onRecharge">充值</view>
					</view>
				</view>
			</view>
			<view class="wrap-tab" id="wrap-tab">
				<view :class="['wrap-tab-main',tabFixed?'fixed':'']" :style="tabFixedTopStyle">
					<view class="container-tab">
						<view :class="['tab-item', tabIndex==0?'activated':'']" @tap="onTapTab(0)">我的动态</view>
						<view :class="['tab-item', tabIndex==1?'activated':'']" @tap="onTapTab(1)">我的收藏</view>
						<view :class="['tab-item', tabIndex==2?'activated':'']" @tap="onTapTab(2)">我的点赞</view>
					</view>
				</view>
			</view>
			<view class="wrap-list">
				<template v-if="list.length>0">
					<view class="wrap-post" v-if="tabIndex===0">
						<view v-for="(item,idx) in list" :key="idx" class="item-post"
							@tap="handleToPostDetail(item)">
							<view class="post-title">
								<image class="avatar" :src="item.mid_table_remark_009==-1?'/static/default_avatar.png':item.mid_table_remark_009" mode="aspectFit"></image>
								<view class="u-flex-column">
									<view>{{ item.mid_table_remark_007 == -1 ? '用户' : item.mid_table_remark_007 }}</view>
									<view class="time">{{ formatDate(item.mid_table_remark_040) }}</view>
								</view>
							</view>
							<view class="post_content">
								<view class="post_content_text">
									{{ item.mid_table_remark_003 }}
								</view>
								<view v-if="item.mid_table_remark_005">
									<view class="one_image" v-if="item.mid_table_remark_005.length === 1"  @click.stop>
										<u--image @click="previewImg(item.mid_table_remark_005)" :width="564" :height="318" :radius="24" :src="item.mid_table_remark_005[0]">
										  <template v-slot:loading>
										    <u-loading-icon></u-loading-icon>
										  </template>
										</u--image>
									</view>
									<view v-else class="grid_image" @click.stop>
										<u-album :multipleSize="174" :space="12" :rowCount="3" :maxCount="9" :urls="item.mid_table_remark_005"></u-album>
									</view>
								</view>
							</view>
							<view class="action_area">
								<view class="flex_row">
									<view class="flex_row" @click.stop="openComment(item)">
										<image class="action_area_icon" src="/static/icon_post_comment.png" mode="aspectFit"></image>
										<view class="action_area_num">{{ item.save_data_001 }}</view>
									</view>
									<view class="flex_row" style="margin-left: 46rpx;" @click.stop="setPostLike(item)">
										<image v-if="item.save_data_003.length === 0" class="action_area_icon" src="/static/post/unLike.png" mode="aspectFit"></image>
										<image v-else class="action_area_icon" src="/static/post/like_selected.png" mode="aspectFit"></image>
										<view class="action_area_num">{{ item.save_data_002 }}</view>
									</view>
								</view>
								<image @click.stop="deletePost(item, index)" style="width: 28rpx;height: 28rpx;"
									src="/static/deletePost.png" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view v-else>
						<view v-for="(item,idx) in list" :key='idx' class="wrap-list-item">
							<comp-my-item :itemType="tabIndex?'praise':'favorite'" :itemData='item' :itemIdx="idx"
								@onCancel="onCancelItem" @onDetail="onDetailItem"></comp-my-item>
						</view>
					</view>
				</template>
				<view v-else class="box-empty">
					<image class="icon-none" src="/static/icon_none.png"></image>
				</view>
			</view>
		</template>
	</view>

	<comp-recharge v-model:visible='showRecharge' @refreshAmount="onRefreshAmount"></comp-recharge>
	<comp-recharge-offline v-model:visible='showRechargeOffline'></comp-recharge-offline>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		nextTick
	} from "vue"
	import {
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		showBRContent,
		showDecodeBase64
	} from "@/utils/tool.js"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"

	import CompRecharge from "/components/popup-recharge/index.vue"
	import CompRechargeOffline from "/components/popup-recharge-offline/index.vue"
	import CompMyItem from "@/components/my-item/index.vue"
	import CustomNav from "@/components/custom-nav/index.vue"
	import {
		getCustomerBaseInfo,
		getSystemUseOrderRelateRuleAndRecord
	} from "@/http/apis/customerBaseAPI.js"
	import {
		middleAPI
	} from "@/http/apis/middleAPI.js"
	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": navHeightInfo.navTotalHeight + 'px'
	})
	let settingStyle = ref({})
	// #ifdef MP-WEIXIN
	let rpx10 = uni.upx2px(10);
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	let right = menuButtonInfo.width + rpx10;

	settingStyle.value = {
		marginRight: `${right}px`, //`${menuButtonInfo.width+menuButtonInfo.left+rpx10}px`
	}
	// #endif

	let userInfo = ref({
		nick_name: "-1",
		weichat_img: '-1',
		amount: '',
		user_phone: ''
	})
	// 昵称显示
	const showNickName = computed(() => {
		if (userInfo.value && userInfo.value.nick_name && userInfo.value.nick_name != -1) {
			return userInfo.value.nick_name;
		}
		return "您未填写昵称"
	})
	// 头像显示
	const showAvatar = computed(() => {
		if (userInfo.value && userInfo.value.weichat_img && userInfo.value.weichat_img != -1) {
			return userInfo.value.weichat_img;
		}
		return "-1"
	})
	// 金额显示
	let userAmountInfo = ref({})
	const showAmount = computed(() => {
		if (userAmountInfo.value && userAmountInfo.value.mid_table_remark_008 && userAmountInfo.value
			.mid_table_remark_008 != -1) {
			return parseFloat(userAmountInfo.value.mid_table_remark_008).toFixed(2);
		}
		return '0.00'
	})
	// 手机号码显示
	const showPhoneUser = computed(() => {
		if (userInfo.value && userInfo.value.user_phone && userInfo.value.user_phone != -1) {
			let tmpPhone = userInfo.value.user_phone;
			tmpPhone = tmpPhone.replace(/(\d{3})\d*(\d{4})/, "$1****$2");
			return tmpPhone
		}
		return ""
	})
	// 充值
	let showRecharge = ref(false)
	let showRechargeOffline = ref(false)
	const onRecharge = () => {
		let tmpShowRecharge = false;
		// #ifdef APP-PLUS
		let systemInfo = uni.getSystemInfoSync();
		if (systemInfo.platform.toLowerCase() == 'ios') {
			tmpShowRecharge = true;
		}
		// #endif
		showRecharge.value = tmpShowRecharge;
		showRechargeOffline.value = !tmpShowRecharge
	}
	// tab切换

	let tabIndex = ref(0);
	let notMore = ref(false);
	let page = ref(1)
	let pre_db_para_begin_idx = ref(0)
	let list = ref([])
	const onTapTab = (idx) => {
		if (tabIndex.value == idx) {
			return;
		}
		tabIndex.value = idx;
		notMore.value = false;
		pre_db_para_begin_idx.value = 0;
		list.value = []
		getList();
	}
	
	const formatDate = (dateStr) => {
	    const year = dateStr.slice(0, 4);
	    const month = dateStr.slice(4, 6);
	    const day = dateStr.slice(6, 8);
	
	    return `${year}.${month}.${day}`;
	}

	const getList = async () => {
		console.log('===', userInfo.value.id_public_user_info)
		const pageSize = 20
		let queryData = {
			invoke_method: 'public_load_middle_table_list',
			// pre_db_para_middle_table_name: 'public_middle_table_lite_mod_favorite_things',
			// type_middle_app: 90001,
			// type_inner_app: tabIndex.value === 1 ? 2002 : 1001,
			is_online: 0,
			pre_db_para_begin_idx: (page.value - 1) * pageSize,
			pre_db_para_length_4_list: pageSize,
			id_public_user_info: userInfo.value.id_public_user_info
		}
		
		switch (tabIndex.value){
			// 我的动态
			case 0:
				queryData.pre_db_para_middle_table_name = 'public_middle_table_lite_mod_forum_bbs';
				queryData.type_middle_app = 62001;
				queryData.type_inner_app = 1001;
				queryData.pre_cmd_para_show_main_info = "true",
				queryData.pre_cmd_para_show_answer_info = "true"
				break;
			// 我的收藏
			case 1:
				queryData.pre_db_para_middle_table_name = 'public_middle_table_lite_mod_favorite_things';
				queryData.type_middle_app = 90001;
				queryData.type_inner_app = 2002;
				break;
			// 我的点赞
			case 2:
				queryData.pre_db_para_middle_table_name = 'public_middle_table_lite_mod_favorite_things';
				queryData.type_middle_app = 90001;
				queryData.type_inner_app = 1001;
				break;
			default:
				break;
		}

		let response = await middleAPI(queryData).catch((err) => {
			let nextPage = page.value - 1;
			page.value = nextPage <= 0 ? 1 : nextPage;
			// pre_db_para_begin_idx.value -= pageSize;
			console.log(err)
		})
		let tmpList = list.value;
		if (response) {
			let result = response.page_content || [];
			if(tabIndex.value === 0) {
				result.forEach(item => {
					item.mid_table_remark_003 = showDecodeBase64(item.mid_table_remark_003)
					if(item.mid_table_remark_005) {
						item.mid_table_remark_005 = item.mid_table_remark_005.split('-_-')
					}
				})
			}else {
				result.forEach(item => {
					item.show_mid_table_remark_001 = item.mid_table_remark_001;
					item.show_mid_table_remark_002 = item.mid_table_remark_002;
					item.show_mid_table_remark_001 = showBRContent(showDecodeBase64(item
						.show_mid_table_remark_001))
					item.show_mid_table_remark_002 = showBRContent(showDecodeBase64(item
						.show_mid_table_remark_002))
				})
			}
			if (result.length < pageSize) {
				notMore.value = true;
			}
			tmpList = tmpList.concat(result)
		}

		list.value = tmpList

	}
	// getList();
	// 滚动加载
	let fixedTop = ref(0)
	let tabFixed = ref(false)
	onMounted((event) => {
		// const query = uni.createSelectorQuery();
		// query.select(`#wrap-tab`).boundingClientRect((res) => {
		// 	fixedTop.value = res.top;
		// }).exec();
	})
	onPageScroll((evt) => {
		let scrollTop = evt.scrollTop;
		let tmpValue = fixedTop.value - navHeightInfo.navTotalHeight;
		if (tmpValue < scrollTop) {
			tabFixed.value = true
		} else {
			tabFixed.value = false;
		}
	})
	const tabFixedTopStyle = computed(() => {
		if (tabFixed.value) {
			return {
				"top": navHeightInfo.navTotalHeight + 'px'
			}
		}
		return null
	})
	onReachBottom(() => {
		if (notMore.value) {
			return;
		}
		page.value += 1;
		getList()
	})
	// 取消收藏/点赞
	const onCancelItem = (idx) => {
		let tmpList = list.value;
		let queryParas = {
			invoke_method: "public_insert_or_update_middle_table",
			pre_db_para_middle_table_name: "public_middle_table_lite_mod_favorite_things",
			pre_db_para_id_public_middle_table: tmpList[idx].id_public_middle_table,
			is_online: 1
		}
		middleAPI(queryParas).then(res => {

			tmpList.splice(idx, 1)
		})
	}
	// 去设置
	const handleToSet = () => {
		uni.navigateTo({
			url: '/pages/setting/index'
		})
	}
	// 去首页
	const onToIndex = () => {
		uni.reLaunch({
			url: "/pages/index/index"
		})
	}
	let pageLoading = ref(false)
	const initData = async () => {
		let userInfoResult = await getCustomerBaseInfo({
			invoke_method: 'user_and_shop_info'
		}).catch((err) => {
			console.log(err, ">>>getUserInfoByApi")
		});
		if (userInfoResult) {
			Object.assign(userInfo.value, userInfoResult?.public_user_info || {})
		} else {
			return;
		}
		let userAmoutResult = await getSystemUseOrderRelateRuleAndRecord({
			invoke_method: 'static_4_money',
			'pre_cmd_para_id_public_user_info': userInfo.value.id_public_user_info,
			'pre_cmd_para_type_list': 1211
		}).catch((err) => {
			console.log(err, ">>>getUserAmount")
			userAmountInfo.value = {};
		});
		if (userAmoutResult) {
			let big_data = userAmoutResult.big_data || [];
			let amount = big_data[0] || {}
			userAmountInfo.value = amount;
		} else {
			return;
		}
		pageLoading.value = true;
		nextTick(() => {
			const query = uni.createSelectorQuery();
			query.select(`#wrap-tab`).boundingClientRect((res) => {
				fixedTop.value = res.top;
			}).exec();
		})
		notMore.value = false;
		pre_db_para_begin_idx.value = 0;
		list.value = []
		getList();
	}

	onShow(() => {
		initData()
	})
	// 充值刷新金额处理
	const onRefreshAmount = async () => {
		let userAmoutResult = await getSystemUseOrderRelateRuleAndRecord({
			invoke_method: 'static_4_money',
			'pre_cmd_para_id_public_user_info': userInfo.value.id_public_user_info,
			'pre_cmd_para_type_list': 1211
		}).catch((err) => {
			console.log(err, ">>>getUserAmount")
			userAmountInfo.value = {};
		});
		if (userAmoutResult) {
			let big_data = userAmoutResult.big_data || [];
			let amount = big_data[0] || {}
			userAmountInfo.value = amount;
		} else {
			return;
		}
	}
	// 用户中心
	const toUser = () => {
		uni.navigateTo({
			url: "/pages/my/user"
		})
	}
	// 去详情
	const onDetailItem = (idx) => {
		let item = list.value[idx]
		console.log(item, ">>>>item,")
		// // 拿不到013暂时不跳转
		// uni.navigateTo({
		// 	url: `/pages/chat/chat-their?id=${item.mid_table_remark_008}&subname=${encodeURIComponent(item.mid_table_remark_015)}&sessionId=${encodeURIComponent(item.mid_table_remark_013)}`
		// })
	}
	
	// 进入动态详情
	const handleToPostDetail = (item) => {
		if (!item || !item.id_public_middle_table) {
			return;
		}
		uni.navigateTo({
			url: `/pages/post/post-detai?id=${item.id_public_middle_table}`
		})
	}
	
	// 打开评论
	function openComment(item) {
		if (!item || !item.id_public_middle_table) {
			return;
		}
		uni.navigateTo({
			url: `/pages/post/post-detai?id=${item.id_public_middle_table}&openComment=1`
		})
	}
	
	// 点赞/取消点赞
	async function setPostLike(item) {
		if(item.save_data_003.length === 0) {
			// 点赞
			let queryParas = {
				invoke_method: "public_insert_or_update_middle_table",
				pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
				type_middle_app: 64001,
				type_inner_app: 1001,
				is_online: 0,
				id_public_user_info: item.id_public_user_info,
				mid_table_remark_015: item.id_public_middle_table,
				mid_table_remark_016: userInfo.value.id_public_user_info,
			}
			middleAPI(queryParas).then((res) => {
				const data = res.page_content[0]
				item.save_data_002++;
				item.save_data_003 = [data]
			}, err => {
				console.log(err)
			})
		}else {
			// 取消点赞
			let queryParas = {
				invoke_method: "public_insert_or_update_middle_table",
				pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
				is_online: 1,
				pre_db_para_id_public_middle_table: item.save_data_003[0].id_public_middle_table,
				type_middle_app: 64001,
				type_inner_app: 1001,
			}
			middleAPI(queryParas).then((res) => {
				item.save_data_002 = item.save_data_002 - 1;
				item.save_data_003 = []
			}, err => {
				console.log(err)
			})
		}
	}
	
	// 删除
	function deletePost(item, index) {
		uni.showModal({
			title: '提示',
			content: '确定要删除该动态吗',
			success: res => {
				if (res.confirm) {
					let queryData = {
						invoke_method: "public_insert_or_update_middle_table",
						pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
						type_middle_app: 62001,
						type_inner_app: 1001,
						is_online: 111,
						pre_db_para_id_public_middle_table: item.id_public_middle_table
					}
					
					middleAPI(queryData).then((res) => {
						list.value.splice(index, 1)
					}, err => {
						console.log(err)
					})
				}
			}
		})
	}
</script>

<style lang="less" scoped>
	view {
		box-sizing: border-box;
	}
	
	.flex_row {
		display: flex;
		align-items: center;
	}
	
	.icon-setting {
		width: 42rpx;
		height: 42rpx;
	}

	.page-my {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #182836;
		display: flex;
		display: -webkit-flex;
		flex-direction: column;

		.wrap-basic {
			position: relative;
			width: 100%;
			padding: 40rpx 32rpx 0rpx;
			box-sizing: border-box;

			.container-basic {
				position: relative;
				width: 100%;
				// height: 342rpx;
				// background: linear-gradient(0deg, #3EA373 0%);
				border: 2rpx solid #00FFF6;
				border-radius: 32rpx;
				// background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(72, 194, 130, 0.4));
				// background: linear-gradient(0deg, #00FFF6 0%);
				background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 255, 246, 0.4));
				box-sizing: border-box;

				.bg-logo {
					position: absolute;
					width: 328rpx;
					height: 310rpx;
					right: 0;
					top: 0;
				}

				.cont-basic {
					position: relative;
					width: 100%;
					padding: 46rpx 40rpx;
					box-sizing: border-box;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;
					align-items: center;

					.container-avatar {
						position: relative;
						width: 150rpx;
						height: 150rpx;
						border-radius: 50%;
						box-sizing: border-box;
						flex-shrink: 0;
						margin-right: 24rpx;

						.wrap-avatar {
							position: relative;
							width: 150rpx;
							height: 150rpx;
							border-radius: 50%;
							box-sizing: border-box;
							// flex-shrink: 0;
							// margin-right: 24rpx;

							&.user-avatar {
								border: 5rpx solid #FFF;
							}
						}

						.icon-edit {
							position: absolute;
							width: 52rpx;
							height: 52rpx;
							bottom: 0;
							right: 0;
						}
					}


					.wrap-basic-info {
						position: relative;
						flex: 1;
						display: flex;
						display: -webkit-flex;
						flex-direction: column;
						justify-content: center;

						.cont-nickname {
							position: relative;
							width: 100%;
							font-size: 44rpx;
							line-height: 44rpx;
							// font-family: PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.cont-phone {
							position: relative;
							width: 100%;
							font-size: 32rpx;
							line-height: 32rpx;
							// font-family: PingFang SC;
							font-weight: 600;
							color: #FFFFFF;
							overflow: hidden;
							text-overflow: ellipsis;
							margin-top: 50rpx;
						}
					}
				}

				.cont-basic-bottom {
					position: relative;
					width: 100%;
					height: 98rpx;
					background: #00FFF6;
					border-radius: 24rpx 24rpx 32rpx 32rpx;
					padding-left: 38rpx;
					padding-right: 38rpx;
					box-sizing: border-box;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;

					font-size: 28rpx;
					// font-family: PingFang SC;
					font-weight: 600;
					// color: #FFFFFF;
					color: #182836;
					line-height: 98rpx;

					.cont-amount {
						position: relative;
						flex: 1;
						display: flex;
						display: -webkit-flex;
						flex-direction: row;
						align-items: center;

						.amount {
							font-size: 48rpx;
							// font-family: Helvetica;
							font-weight: bold;
							// color: #FFFFFF;
							color: #182836;
							flex: auto;
							width: 0;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}




					.btn-recharge {
						position: relative;
						width: 148rpx;
						height: 56rpx;
						// background: #FFFFFF;

						background: #182836;
						border-radius: 28rpx;
						line-height: 56rpx;
						text-align: center;

						font-size: 28rpx;
						// font-family: PingFang SC;
						font-weight: 600;
						color: #00FFF6;
					}
				}
			}
		}

		.wrap-tab {
			position: relative;
			width: 100%;
			height: 184rpx;
			box-sizing: border-box;

			.wrap-tab-main {
				position: relative;
				width: 100%;
				height: 184rpx;
				padding: 56rpx 32rpx 40rpx;
				border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
				box-sizing: border-box;

				&.fixed {
					position: fixed;
					top: 0;
					left: 0;
					background-color: #182836;
					z-index: 3;
				}
			}

			.container-tab {
				position: relative;
				width: 100%;
				height: 88rpx;
				background: #2D4052;
				border-radius: 24rpx;
				padding-left: 8rpx;
				padding-right: 8rpx;
				box-sizing: border-box;
				margin: 0 auto;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.tab-item {
					position: relative;
					width: 320rpx;
					height: 72rpx;
					line-height: 72rpx;
					text-align: center;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					color: #FFFFFF;
					box-sizing: border-box;

					&.activated {
						background: #00FFF6;
						box-shadow: 0px 6px 16px 0px rgba(147,176,165,0.16);
						border-radius: 16rpx;
						color: rgba(24, 40, 54, 1);
					}


				}
			}
		}

		.wrap-list {
			position: relative;
			width: 100%;
			padding-top: 40rpx;
			padding-bottom: 40rpx;
			box-sizing: border-box;

			.box-empty {
				position: relative;
				width: 100%;
				text-align: center;

				.icon-none {
					position: relative;
					width: 326rpx;
					height: 326rpx;
					margin: 64rpx auto;
					vertical-align: top;

				}
			}

			.wrap-list-item {
				position: relative;
				width: 100%;
				margin-bottom: 24rpx;
				box-sizing: border-box;
			}
			
			.wrap-post {
				position: relative;
				width: 100%;
				padding: 0 32rpx;
				box-sizing: border-box;
				.item-post {
					position: relative;
					background: #213343;
					border-radius: 32rpx;
					padding: 42rpx 30rpx 32rpx 34rpx;
					margin-top: 32rpx;
					display: flex;
					display: -webkit-flex;
					flex-direction: column;
					justify-content: space-between;
				
					.post-title {
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						margin-bottom: 28rpx;
						box-sizing: border-box;
				
						.avatar {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
							margin-right: 16rpx;
						}
				
						.time {
							margin-top: 12rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #B5B5B5;
						}
					}
				
					.post_content {
						width: 100%;
						padding: 32rpx 29rpx;
						font-size: 30rpx;
						font-weight: 400;
						color: #00FFF6;
						box-sizing: border-box;
						background: #182836;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
						opacity: 1;
						border: 1rpx solid rgba(255, 255, 255, 0.2);
						margin-bottom: 24rpx;
						
						&_text {
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
						}
						
						.one_image {
							margin-top: 20rpx;
						}
				
						.grid_image {
							margin-top: 20rpx;
							
							/deep/ image {
								border-radius: 16rpx;
							}
						}
					}
				
					.action_area {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				
					.action_area_icon {
						width: 28rpx;
						height: 28rpx;
						margin-right: 7rpx;
					}
				
					.action_area_num {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
					}
				}
			}
		}
	}
</style>